{% extends 'base.html' %}

{% load staticfiles %}

{% block custom_css %}
    <style>
        .django-ckeditor-widget {
            width: 100%;
        }
    </style>
{% endblock %}

{% block title %}社区-学厨网{% endblock %}
{% block content %}
    <div class="container" style="margin-top: 70px;">
        <ol class="breadcrumb">
            <li><a href="{% url 'index' %}">首页</a></li>
            <li class="active">社区</li>
        </ol>
    </div>
    <div class="container">
        <!-- Example row of columns -->
        <div class="col-lg-8">

            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    {% for banner in banners %}
                        <div class="item {% if forloop.first %}active{% endif %}">
                            <img src="{{ MEDIA_URL }}{{ banner.image }}" data-holder-rendered="true">
                        </div>
                    {% endfor %}
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel"
                   data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true"
                                            class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="carousel-control right" href="#myCarousel"
                   data-slide="next"> <span _ngcontent-c3="" aria-hidden="true"
                                            class="glyphicon glyphicon-chevron-right"></span></a>
            </div>

            <div class="page-header">
                <div class="clearfix">
                    <div class="pull-left">
                        <h2>广场</h2>
                    </div>
                    <div class="pull-right">
                        <a href="#posting" class="btn btn-primary" style="margin-top: 20px;">发帖</a>
                    </div>
                </div>
            </div>
            {% for topic in topics.object_list %}
                <div class="media" style="margin-bottom: 20px;">
                    <div class="media-left">
                        <a href="{% url 'cookbook:user_menu' topic.user_id %}">
                            <img class="img-circle" data-src="holder.js/64x64" alt="64x64"
                                 src="{{ MEDIA_URL }}{{ topic.user.image }}"
                                 data-holder-rendered="true" style="width: 64px; height: 64px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading"><a
                                href="{% url 'community:community_detail' topic.id %}">{{ topic.title }}</a>
                        </h4>
                        <div class="clearfix" style="margin-bottom: 6px;">
                            <div class="pull-left">
                            <span><span class="glyphicon glyphicon-time"
                                        aria-hidden="true"></span>&nbsp;{{ topic.add_time }}</span>
                            </div>

                        </div>


                        {{ topic.desc | safe }}


                        <div class="clearfix" style="margin-top: 6px;">
                            <div class="pull-left">
                            <span><span class="glyphicon glyphicon-heart-empty"
                                        aria-hidden="true"></span>&nbsp;{{ topic.like_number }}人喜欢</span>
                            </div>
                            <div class="pull-right">
                                <span><span class="glyphicon glyphicon-comment"
                                            aria-hidden="true"></span>&nbsp;{{ topic.comment_number }}条评论</span>
                            </div>
                        </div>

                    </div>
                </div>
            {% endfor %}

            <!---分页--->
            <div class="pageturn" style="text-align: center">
                <ul class="pagelist">
                    <div class="pagination">
                        {% if topics.has_previous %}
                            <li class="long"><a href="?{{ topics.previous_page_number.querystring }}"
                                                class="page">上一页</a></li>
                        {% endif %}
                        {% for page in topics.pages %}
                            {% if page %}
                                {% ifequal page topics.number %}
                                    <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                {% else %}
                                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                {% endifequal %}
                            {% else %}
                                <li class="none"><a href="">...</a></li>
                            {% endif %}
                        {% endfor %}
                        {% if topics.has_next %}
                            <li class="long"><a href="?{{ topics.next_page_number.querystring }}">下一页</a></li>
                        {% endif %}
                    </div>
                </ul>
            </div>

            <!---发帖表单--->
            <form action="{% url 'community:community_list' %}" method="post" id="posting" style="margin-bottom: 10px;">
                <div class="form-group" style="margin-left: 1px;">
                    <label for="name"><span class="glyphicon glyphicon-pencil" aria-hidden="true"
                                            style="margin-bottom: 10px;"></span>&nbsp;发表新帖</label>
                    {{ topic_form.title }}
                </div>
                {% if user.is_authenticated %}
                    <div class="form-group" style="margin-left: 1px;">
                        {{ topic_form.content }}
                    </div>
                {% else %}
                    <div class="form-group" style="margin-left: 1px;">
                        <textarea class="form-control" rows="12"></textarea>
                    </div>
                {% endif %}
                {% csrf_token %}
                <button type="submit" class="btn btn-primary">发&nbsp;表</button>
            </form>

        </div>
        <div class="col-lg-4">
            <div>
                {% for ad in ad_image %}
                    <a href="http://www.ctrip.com/"><img class="img-responsive center-block"
                                                         src="{{ MEDIA_URL }}{{ ad.image }}" alt="..."></a>
                {% endfor %}
            </div>
            <div class="page-header">
                <h3>热门话题</h3>
            </div>
            <div>
                {% for hot_topic in hot_topics %}
                    <a href="{% url 'community:community_detail' hot_topic.id %}"
                       class="list-group-item ">{{ hot_topic.title }}</a>
                {% endfor %}
            </div>

        </div>

    </div> <!-- /container -->

    <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
{% endblock %}